<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

	<style>
		.tooltip {
			background-color:#{richSkin.generalBackgroundColor};
			border-width:3px;
			padding:10px;
		}
		.tooltip-text {
			width:350px;
			height:65px;
			cursor:arrow;
			border-width:2px;
			text-align:center;
		}
		.tooltipData {
			font-weight: bold;
		}
	</style>
	
	<h:panelGrid columns="2">
	<rich:panel id="sample1" styleClass="tooltip-text">
		<rich:toolTip>
			<span style="white-space:nowrap">
				This tool-tip content was <strong>pre-rendered</strong> to the page.<br/>
				The look of this tool-tip is 100% defined by skin.
			</span>
		</rich:toolTip>
		<p>
			Here you can see <b>default client-side</b> tool-tip
		</p>
	</rich:panel>
	<rich:panel id="sample2" styleClass="tooltip-text">
		<rich:toolTip followMouse="true" direction="top-right" delay="500" styleClass="tooltip" style="width:250px">
			<span  style="white-space:nowrap">
				This tool-tip content also <strong>pre-rendered</strong> to the page.<br/>
				However, the look of this tool-tip is customized<br/>
				by styleClass attribute.
			</span>
		</rich:toolTip>
		<p>
			This tool-tip will <b>follow mouse</b>. Also this tool-tip has a <b>delay 0.5 sec</b>,
			 so be patient!
		</p>
	</rich:panel>
	<h:form>
	<rich:panel  id="sample3" styleClass="tooltip-text">
		<rich:toolTip direction="top-right" mode="ajax" styleClass="tooltip" layout="block">
			<f:facet name="defaultContent">
				<strong>Wait...</strong>
			</f:facet>
			<span   style="white-space:nowrap">This tool-tip content was <strong>rendered on server</strong>
			 </span>
			<h:panelGrid columns="2">
				<h:outputText   style="white-space:nowrap" value="tooltips requested:" />
				<h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" />
			</h:panelGrid>
		</rich:toolTip>
		<p>
			This tool-tip rendered on server <b>in separate request</b>.
		</p>
	</rich:panel>
	</h:form>
	<h:form>
	<rich:panel  id="sample4" styleClass="tooltip-text">
		<rich:toolTip event="onclick" direction="bottom-left" mode="ajax" styleClass="tooltip" layout="block">
			<f:facet name="defaultContent">
				<strong>Wait...</strong>
			</f:facet>
			<span   style="white-space:nowrap">This tool-tip content was <strong>rendered on server</strong><br/></span>
			<h:panelGrid columns="2">
				<h:outputText  style="white-space:nowrap" value="tooltips requested:" />
				<h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" />
			</h:panelGrid>
		</rich:toolTip>
		<p>
			This tool-tip will be <b>activated on mouse click</b>. It also has a <b>bottom-left</b> position.
		</p>
	</rich:panel>
	</h:form>
</h:panelGrid>


</ui:composition>